<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" style="background: url('../images/农业.jpg') no-repeat;background-size: 100%">
<head>
    <meta charset="UTF-8">
    <title>滑动开关按钮</title>
    <style>
        .top {text-align: center;width: 100%;height: 80px;line-height: 80px;}
        body{padding:0;margin:0;}
        img {opacity:0.6;filter:alpha(opacity=40)}

        .theme{height: 50px;margin-left: 43%;font-size: 20px}
        input{display: inline-block;border-radius:100%;
            margin-right:10px;vertical-align: middle;}
    </style>
    <script src="/static/home/js/jquery-3.4.1.min.js"></script>
</head>
<body style="height: 600px;">
<div class="top">
    <h1>大棚设备控制</h1>
</div>
{foreach name="result" item="vo2" }
    <p>
        <span class="theme">{$vo2['control_shortname']}</span>
        {if condition="$vo2['is_open'] eq 1"}
        <input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}">开
        <input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"      value="2" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关
        {else /}
        <input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"    value="1" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">开
        <input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="2" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关
        {/if}
    </p>
{/foreach}
</body>
</html>
<script>
    for(var i =1;i < 8;i++){
        var c = "item"+i;
        $("input[type=radio][class="+c+"]").change(function() {
            var current_value = this.value;
            //得到class名字
            var cla = this.className;
            // 得到控制设备macid
            var control_id = this.dataset.dev_id;
            $.ajax({
                //请求方式
                type : "POST",
                //请求地址
                url : "{:url('control')}",
                dataType:"json",//数据类型是json
                //数据，json字符串
                data :  {"value":current_value,"id":this.dataset.id},
                //请求成功
                success : function(result) {
                    if(result.code== 1){
                        alert("操作成功");
                        //操作成功以后 进行发送消息
                        ws = new WebSocket("ws://49.122.47.147:65510");
                        ws.onopen=function (e) {
                            if(ws.readyState === 1){
                                var message = {"uid":"1","gateway_id":"wenshi_12","data":{"dev_id":control_id,"value":current_value}};
                                ws.send(JSON.stringify(message));
                            }
                        };
                        return false;
                    }else {
                        if(current_value == 1){
                            $("input[type=radio][class="+cla+"][value=2]").prop("checked", "checked");
                        }else {
                            console.log("aaaaaaa");
                            $("input[type=radio][class="+cla+"][value=1]").prop("checked", "checked");
                        }
                        alert("操作失败");
                        return false;
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                }
            });
        });
    }
</script>